<template>
	<view class="login">
		<view class="element">
			<p>Hi</p>
			<p>WELCOME</p>
			<p class="title">貂蝉到家</p>
		</view>
		<view class="container">
			<view class="form">
				<view class="label">账号</view>
				<view class="item">
					<uv-input v-model="username" placeholder="请输入账号" prefixIcon="account" border="bottom" prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</view>
				<view class="label">密码</view>
				<view class="item">
					<uv-input v-model="password" type="password" placeholder="请输入密码" prefixIcon="lock"  border="bottom" prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</view>
				<view class="submit-content">
					<view class="submit" @click="submit">
						立即登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				username: '', 
				password: ''
			}
		},
		methods: {
			submit(){
				this.$http.http("masterchannel/login/index",{
					username: this.username,
					password: this.password
				}, "POST").then(res=>{
					this.$http.tips(res.msg)
					if(res.code === 1){
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('is_admin', res.data.is_admin)
						uni.reLaunch({
							url: "/pages/home/index"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.element {
		width: 100%;
		height: 50%;
		color: #fff;
		font-size: 70rpx;
		font-family: monospace;
		padding: 200rpx 60rpx;
		letter-spacing: 6rpx;
		box-sizing: border-box;
		background: linear-gradient(90deg, #526cf9 50%, #54c6fd 100%);
		clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);

		.title {
			margin-top: 30rpx;
		}
	}

	.container {
		position: relative;
		z-index: 10;
		margin-top: -220rpx;
		width: 100%;
		padding: 0rpx 60rpx;
		box-sizing: border-box;

		.form {
			position: relative;
			border-radius: 16rpx;
			color: #909399;
			font-size: 28rpx;
			background: #fff;
			box-shadow: 0px 8px 15px 1px rgba(0, 0, 0, 0.3);
			padding: 60rpx 40rpx 140rpx;
			.label{
				margin-bottom: 15rpx;
			}
			.item{
				margin-bottom: 40rpx;
			}
			.submit-content{
				width: 100%;
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: -40rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			.submit{
				color: #fff;
				width: 70%;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				background: linear-gradient(90deg, #526cf9 50%, #54c6fd 100%);
				transition: all 0.2s ease; /* 添加过渡动画 */
			}
			/* 鼠标悬停效果（PC端） */
			.submit:hover {
			  transform: scale(1.03); /* 轻微放大 */
			  box-shadow: 0 8rpx 20rpx rgba(84,198,253,0.3); /* 增加投影 */
			}
			/* 点击按下效果（所有端） */
			.submit:active {
			  transform: scale(0.97); /* 点击时轻微缩小 */
			  opacity: 0.8; /* 降低透明度 */
			}
		}
	}
</style>